<template>
  <div>
    <!-- 改变状态弹出框 -->
    <el-dialog
      title="改变状态"
      :visible.sync="dialogChangeStatusVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :hide-required-asterisk="true" :status-icon="true">
        id: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="content">{{
          rowChange.review_record_id
        }}</span>
        <br />
        权限： <el-radio v-model="radio" label="0">可读</el-radio>
        <el-radio v-model="radio" label="1">禁读</el-radio>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogChangeStatusVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="changeStatusAleady()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog
      title="删除"
      :visible.sync="delChangeStatus"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :hide-required-asterisk="true" :status-icon="true">
        <span>确定删除此条信息？</span>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delChangeStatus = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="del()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
         <el-input
        class="input1"
        placeholder="请输入要查询的用户"
        prefix-icon="el-icon-search"
        v-model="msg"
        clearable
      ></el-input>
 <el-card
        class="el-card"
        shadow="hover"
        v-for="(item, index) in list"
        :key="index"
      >
        <span class="title">点评记录ID：</span> <span>{{ item.review_record_id }}</span><br/>
       <span class="title">评分：</span> <span>{{ item.review_score }}</span><br/>
       <span class="title">点赞数:</span><span>{{ item.review_likes }}</span><br/>
       <span class="title">优点:</span> <div class="text-merit">{{ item.review_text_merit }}</div> 
       <span class="title">缺点:</span> <div class="text-merit">{{ item.review_text_defect }}</div>
       <span class="title">综合评价:</span> <div class="text-merit">{{ item.review_text }}</div>
       <span class="title">用户权限:</span> <span>{{ item.review_power===0?'所有人可见':'仅自己可见' }}</span><br/>
       <span class="title">是否拥有:</span> <span>{{ item.review_have===0?'拥有':'未拥有' }}</span><br/>
       <span class="title">点评对象类型:</span> <span>{{ item.review_type }}</span>
<div class="btnAll">
  <el-button
              type="warning"
              plain
              @click="changeStatus(item)"
              size="mini"
              >更改状态</el-button
            >
            <el-button
              type="danger"
              plain
              @click="delStatus(item)"
              size="mini"
              >删除</el-button
            >
</div>
      <!-- 表格 -->
    
    </el-card>
  </div>
</template>
<script>
import util from '../lib/index.js';
export default {
  data() {
    return {
      msg: '',
      list: [],
      dialogVisible: false,
      dialogChangeStatusVisible: false,
      delChangeStatus: false,
      rowChange: [],
      radio: '0',
      power: 0,
      row: [],
      delRow: [],
    };
  },
  methods: {
    //查看内容
    lookContent(index, row) {
      this.dialogVisible = true;
      this.row = row;
    },
    //更改状态
    changeStatus(row) {
      this.dialogChangeStatusVisible = true;
      this.rowChange = row;
      this.radio = this.rowChange.review_state + '';
      console.log(this.rowChange);
      console.log(this.radio);
    },
    //更改状态弹窗关闭
    changeStatusAleady() {
      this.dialogChangeStatusVisible = false;
      util
        .remarkChange({
          review_record_id: this.rowChange.review_record_id,
          review_state: parseInt(this.radio),
        })
        .then((res) => {
          //  console.log(res)
          util.remarkAll({}).then((res) => {
            this.list = res.data.data;
            console.log(res.data.data);
          });
        });
      console.log(this.radio);
    },
    //删除
    delStatus(row) {
      this.delChangeStatus = true;
      this.delRow = row;
       console.log(row);
    },
    //删除弹窗关闭
    del() {
      this.delChangeStatus = false;
      util
        .remarkDel({
          review_record_id: this.delRow.review_record_id,
        })
        .then((res) => {
          util.remarkAll({}).then((res) => {
            this.list = res.data.data;
            // console.log(res);
          });
        });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  mounted() {
    util
      .remarkAll({
        pages: 1,
      })
      .then((res) => {
        this.list = res.data.data;
        // console.log(res);
      });
  },
  computed: {
    search() {
      let arr = [];
      for (let i = 0; i < this.list.length; i++) {
        if (
          (this.list[i].review_record_id + '').indexOf(this.msg) !== -1 ||
          (this.list[i].review_type + '').indexOf(this.msg) !== -1 ||
          (this.list[i].review_public_id + '').indexOf(this.msg) !== -1 ||
          this.list[i].user_name.indexOf(this.msg) !== -1 ||
          this.list[i].review_date.indexOf(this.msg) !== -1
        ) {
          arr.push({
            review_record_id: this.list[i].review_record_id,
            review_type: this.list[i].review_type,
            review_public_id: this.list[i].review_public_id,
            user_name: this.list[i].user_name,
            review_date: this.list[i].review_date,
            review_text: this.list[i].review_text,
            review_text_defect: this.list[i].review_text_defect,
            review_text_merit: this.list[i].review_text_merit,
            review_likes: this.list[i].review_likes,
            review_score: this.list[i].review_score,
            review_have: this.list[i].review_have,
            review_likes: this.list[i].review_likes,
            review_power: this.list[i].review_power,
            review_record_id: this.list[i].review_record_id,
            review_state: this.list[i].review_state + '',
          });
        } else if (this.msg === '') {
          arr = this.list;
        }
      }
      // console.log(arr);
      return arr;
    },
  },
};
</script>
<style  scoped>
.input1 {
  width: 400px;
  margin-bottom: 30px;
}
.btm1 {
  margin-bottom: 30px;
}
.el-card {
  margin: 0 auto;
   width: 700px;
  margin-bottom: 50px;

  
}
.title {
  font-weight: bolder;
  margin-right: 10px;
}
.content {
  font-size: 12px;
  color: gray;
  text-indent: 2rem;
}
.text-merit{
  padding: 0 2em;
}
.btnAll{
  position: relative;
  left: 450px;
  top: -250px;
}
.title{
  font-weight: bolder;
}
</style>